<script setup>
import { useRouter } from 'vue-router';
import { store } from '@/store'; // 引入状态管理
import { ref } from 'vue';

const router = useRouter();

// 表单数据
const formData = ref({
  startTime: '',
  endTime: '',
  campusA: false,
  campusB: false,
  reason: '',
  emergencyContactName: '',
  emergencyContactPhone: '',
  attachments: []
});

// 提交申请
const submitApplication = () => {
  // 完善表单验证
  if (!formData.value.startTime) {
    uni.showToast({
      title: '请填写计划留校开始时间',
      icon: 'none',
      duration: 1500
    });
    return;
  }

  if (!formData.value.endTime) {
    uni.showToast({
      title: '请填写计划留校结束时间',
      icon: 'none',
      duration: 1500
    });
    return;
  }



  // 模拟提交申请
  uni.showLoading({
    title: '提交中...'
  });

  setTimeout(() => {
    uni.hideLoading();
    store.updateStatus('processing','stay');
    uni.showToast({
      title: '申请提交成功，等待审批',
      icon: 'success',
      duration: 1500
    });
    router.push({ path: '/pages/students/page1' });
  }, 1500);
};

// 上传附件
const uploadFile = () => {
  if (formData.value.attachments.length >= 5) {
    uni.showToast({
      title: '最多只能上传5个附件',
      icon: 'none',
      duration: 1500
    });
    return;
  }

  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      // 这里可以添加实际的文件上传逻辑
      uni.showToast({
        title: '文件选择成功',
        icon: 'success',
        duration: 1500
      });
      formData.value.attachments.push(tempFilePaths[0]);
    }
  });
};

// 返回上一页
const goBack = () => {
  router.push('/pages/students/page1');
};

// 切换标签页
const goToPage2 = () => {
  router.push('/pages/students/page2');
};

const goToPage4 = () => {
  router.push('/pages/students/page4');
};
</script>

<template>
  <!-- 页面整体容器 -->
  <view class="stay-application-page">
    <!-- 顶部返回区域 -->
    <view class="back-area" @click="goBack">
      <text class="back-icon">←</text>
      <text class="back-text">返回</text>
    </view>

    <!-- 提示栏 -->
    <view class="tip-bar">
      留校申请需要审批，请认真做留校计划！
    </view>

    <!-- 选项卡 -->
    <view class="tabs">
      <view class="tab-item" @click="goToPage2">离校申请</view>
      <view class="tab-item active">留校申请</view>
      <view class="tab-item" @click="goToPage4">返校登记</view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 计划留校开始时间 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">计划留校开始时间*</text>
          <textarea
              v-model="formData.startTime"
              placeholder="请输入计划留校开始时间"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 计划留校结束时间 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">计划留校结束时间*</text>
          <textarea
              v-model="formData.endTime"
              placeholder="请输入计划留校结束时间"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 留校校区 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校校区*</text>
          <view class="campus-options">
            <label class="checkbox-item">
              <checkbox
                  v-model="formData.campusA"
                  class="checkbox"
              >
              </checkbox>
              <text class="option-text">A校区</text>
            </label>
            <label class="checkbox-item">
              <checkbox
                  v-model="formData.campusB"
                  class="checkbox"
              >
              </checkbox>
              <text class="option-text">B校区</text>
            </label>
          </view>
        </view>
      </view>

      <!-- 留校原因 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校原因*</text>
          <textarea
              v-model="formData.reason"
              placeholder="请说明留校原因..."
              class="textarea"
              style="min-height: 100px;"
          ></textarea>
        </view>
      </view>

      <!-- 紧急联系人姓名 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">紧急联系人姓名*</text>
          <textarea
              v-model="formData.emergencyContactName"
              placeholder="请输入紧急联系人姓名"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 紧急联系人电话 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">紧急联系人电话*</text>
          <textarea
              v-model="formData.emergencyContactPhone"
              placeholder="请输入紧急联系人电话"
              class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 留校申请附件 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校申请附件*</text>
          <text class="tip-text">支持上传png、jpg图片格式上传，大小30M以下，至少1张上限5张</text>
          <view class="upload-area" @click="uploadFile">
            <image src="/static/upload.png" class="upload-icon"></image>
            <text class="upload-text">上传</text>
          </view>
          <view class="uploaded-files" v-if="formData.attachments.length">
            <text class="file-text" v-for="(file, index) in formData.attachments" :key="index">
              {{ file.split('/').pop() }}
            </text>
          </view>
        </view>
      </view>

      <!-- 校内原住宿地址 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">校内原住宿地址</text>
          <text class="info-text">A校区A楼栋1单元1-103</text>
        </view>
      </view>

      <!-- 留校集中住宿地址 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校集中住宿地址</text>
          <text class="info-text">等待分配</text>
        </view>
      </view>

      <!-- 留校期间管理责任人姓名 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校期间管理责任人姓名</text>
          <text class="info-text">等待安排</text>
        </view>
      </view>

      <!-- 留校期间管理责任人联系电话 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">留校期间管理责任人联系电话</text>
          <text class="info-text">等待安排</text>
        </view>
      </view>

      <!-- 管理责任人假期是否在校 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">管理责任人假期是否在校</text>
          <text class="info-text">等待安排</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="submitApplication">
        提交申请
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 页面整体 */
.stay-application-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 顶部返回区域 */
.back-area {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}
.back-icon {
  font-size: 22px;
  color: #409eff;
  margin-right: 8px;
}
.back-text {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
}

/* 提示栏 */
.tip-bar {
  background-color: #faad14;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

/* 选项卡 */
.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  font-size: 16px;
  color: #666;
  position: relative;
  cursor: pointer;
}
.tab-item.active {
  color: #409eff;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #409eff;
}

/* 表单样式 */
.form-container {
  padding: 15px;
}

.form-section {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 18px;
  margin-bottom: 15px;
}

.form-item {
  margin-bottom: 18px;
}
.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.textarea {
  width: 100%; /* 设置宽度为354px */
  height: 32px; /* 设置高度为32px */
  padding: 6px 15px; /* 减少垂直内边距，避免内容溢出 */
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  min-height: auto; /* 取消最小高度限制 */
  resize: none; /* 禁止调整大小，保持固定尺寸 */
  box-sizing: border-box; /* 确保padding和border包含在设置的尺寸内 */
  line-height: 1; /* 调整行高，使内容垂直居中 */
}
.textarea::placeholder {
  color: #c0c4cc;
}

.campus-options {
  display: flex;
  margin-top: 10px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.checkbox {
  margin-right: 5px;
}
.option-text {
  font-size: 14px;
  color: #666;
}

.tip-text {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px dashed #e5e5e5;
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
}
.upload-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
.upload-text {
  font-size: 14px;
  color: #999;
}

.uploaded-files {
  margin-top: 10px;
}
.file-text {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  line-height: 1.5;
}

.submit-btn {
  background-color: #409eff;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin: 0 15px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
</style>